<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本与图片标签示例</title>
  <style>
    /* 简单样式美化，方便查看效果 */
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      line-height: 1.6;
    }
    .img-container {
      margin: 20px 0;
      text-align: center;
    }
    img {
      max-width: 100%;
      height: auto;
      border: 2px solid #eee;
      border-radius: 8px;
    }
    .highlight {
      background-color: #fff3cd;
      padding: 0 5px;
    }
  </style>
</head>
<body>
  <!-- 文本标签示例 -->
  <h1>一级标题（h1）- 网页主标题</h1>
  <h2>二级标题（h2）- 章节标题</h2>
  
  <p>这是一个段落（p标签）。段落中可以包含<span class="highlight">行内文本（span标签）</span>，用于局部样式或标记。</p>
  
  <p>文本格式化标签示例：
    <br>换行标签（br）会强制换行<br>
    加粗文本：<strong>strong标签（强调重要性）</strong> 或 <b>b标签（仅视觉加粗）</b><br>
    斜体文本：<em>em标签（强调语义）</em> 或 <i>i标签（仅视觉斜体）</i><br>
    插入文本：<ins>ins标签（下划线，表插入）</ins><br>
    删除文本：<del>del标签（删除线，表删除）</del><br>
    下标：H<sub>2</sub>O（sub标签）<br>
    上标：2<sup>3</sup>=8（sup标签）
  </p>
  
  <h3>三级标题（h3）- 图片展示</h3>
  
  <!-- 图片标签示例 -->
  <div class="img-container">
    <!-- 基础图片标签 -->
    <img src="https://picsum.photos/600/400" alt="风景图片" title="点击查看大图">
    <p>图片描述：使用img标签插入的风景图（src指定路径，alt为替代文本）</p>
  </div>
  
  <div class="img-container">
    <!-- 带尺寸控制的图片 -->
    <img src="https://picsum.photos/300/200" alt="缩略图" width="300" height="200">
    <p>带宽度和高度属性的图片（width/height控制尺寸）</p>
  </div>

  <h3>四级标题（h4）- 引用文本</h3>
  <blockquote>
    blockquote标签用于长引用，会自动缩进显示。<br>
    —— 这是一段引用文本
  </blockquote>
  
  <p>短引用可以用q标签：<q>q标签会自动添加引号</q></p>
</body>
</html>